DESIGN SOFTWARE - HTML Colour

intro | tags | color | parameters | images | | Ex1 - Homepage | | links || Ex2 Website | tables | embedding
Need more help? Use an online tutorial: www.w3schools.com

Colour values can be created in various tags like FONT and BODY. You can define the VALUE for a colour in one of two ways:
  1. Use specific text values for colours (ie BGCOLOR="lightblue")
  2. Use a HEXIDECIMAL value for colours (ie. BGCOLOR="#CCCCFF")

Although the first method is EASIER, it limits you to only a dozen or so preset colours to choose from. The HEXIDECIMAL method gives you a selection of MILLIONS of possible colours to choose from, and lets you better match the colour of your webpages with photoshop graphics.

Colour is expressed as a six digit "HEXIDECIMAL" number that represents the amount of RED, GREEN and BLUE you wish to mix together.
"#RRGGBB"

For example:
<FONT COLOR="#993300">
would have
RED=99
GREEN=33
BLUE=00

Note that COLOR must be spelled the American way in HTML - this is critical!

Hexidecimal means that a single digit has a range that can go HIGHER than just 9 - it can go all the way to "F"

0
1
2
3
4
5
6
7
8
9
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

So the HIGHEST a RED, GREEN or BLUE value can go to is "FF"

Mixing the three colours together gives you a range of MILLIONS of possible colours, but we'll keep it simple by repeating the digits in pairs:

RED = "#FF0000"
GREEN = "#00FF00"
BLUE = "#0000FF"

You can also change the color of your webpage background by adding a BGCOLOR parameter to the existing BODY tag... ie: try modifying the BODY tag as follows:
<BODY BGCOLOR="CCCCFF">
What colour do you get?

USER FRIENDLY COLOURS
"Bright" saturated colours (ie "FF0000", or 00FFFF" etc) are poor choices for use on a webpage. They make it difficult to read, and can cause eyestrain. Instead, "soften", "dull" or "lighten" the colours to make them more "user friendly". ie. "CC6666" is a good substitute for harsh red, "339999" is a more "user friendly" version of Aqua.

Exercise:
  • Choose a "Hue" of colour - Red, Green, Blue, Purple, Brown, Orange - whatever you like
  • Create two "user friendly" versions of that colour for your background
    • Make one LIGHT
    • Make the other DARK
  • Use those colours in the BODY tag - one for the BACKGROUND, the other for the TEXT attributes - ie
An "Aqua" colour scheme might be:
<BODY BGCOLOR="#336666" TEXT="#CCFFFF">
Try inverting them - this may give you FAST ways to develop "User Friendly" colour schemes for your webpages